<template>
  <view v-if="object.type && object.obj" class="select-area">
    <view class="select-title">
      <view>{{ object.obj.value || "" }}</view>
      <view class="tag-box" @click="modelShow = true">
        <image
          src="/static/img/warning.png"
          style="width: 100%; height: 100%"
        ></image>
      </view>
    </view>
    <view class="select-content">
      <view class="img-box">
        <image
          :src="imgUrl"
          mode="aspectFill"
          style="width: 100%; height: 100%"
        />
      </view>
      <view class="grid-box">
        <u-grid v-if="colorList.length" @click="gridClick" col="5">
          <u-grid-item v-for="(item, index) in colorList" :key="index">
            <view
              v-if="object.type !== 'glassesBag'"
              :style="{
                backgroundColor: index <= 8 ? item.value : '',
                marginBottom: index <= 4 ? '30rpx' : '0',
              }"
              :class="['grid-item', { gridActive: activeIndex === index }]"
            >
              <view
                v-if="activeIndex === index && index <= 8"
                class="check-box"
              >
                <u-icon
                  class="check-icon"
                  name="checkbox-mark"
                  size="20rpx"
                  color="#fff"
                >
                </u-icon>
              </view>
              <view v-if="index === 9" class="more-color"> 更多颜色 </view>
            </view>
            <view
              v-else
              :style="{
                background:
                  index <= 8
                    ? `url(${item.value}) no-repeat center center / cover`
                    : '',
                marginBottom: index <= 4 ? '30rpx' : '0',
              }"
              :class="['grid-item', { gridActive: activeIndex === index }]"
            >
              <view
                v-if="activeIndex === index && index <= 8"
                class="check-box"
              >
                <u-icon
                  class="check-icon"
                  name="checkbox-mark"
                  size="20rpx"
                  color="#fff"
                >
                </u-icon>
              </view>
              <view v-if="index === 9" class="more-color"> 更多颜色 </view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <u-popup
      class="popup-show"
      :show="popupShow"
      closeOnClickOverlay
      @close="close"
    >
      <view class="popup-content">
        <view class="title-box">
          <view>更多颜色选择</view>
          <view class="close1-btn">
            <u-icon name="close" size="40rpx" @click="close"></u-icon>
          </view>
        </view>
        <view class="grid-box">
          <u-grid v-if="colorList.length" @click="popupClick" col="5">
            <u-grid-item v-for="(item, index) in object.colorList" :key="index">
              <view
                :style="{
                  backgroundColor: item.value,
                  marginBottom: '30rpx',
                  width: '90rpx',
                  height: '90rpx',
                }"
                :class="['grid-item', { gridActive: activeIndex === index }]"
              >
                <view v-if="activeIndex === index" class="check-box">
                  <u-icon
                    class="check-icon"
                    name="checkbox-mark"
                    size="20rpx"
                    color="#fff"
                  >
                  </u-icon>
                </view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
        <view class="btn-box" @click="sureEvent">确定</view>
      </view>
    </u-popup>
    <u-modal :show="modelShow" :title="object.obj.value + '定制说明'">
      <view class="model-content">{{ object.explain }}</view>
      <template slot="confirmButton">
        <view class="close-btn" @click="modelShow = false">关闭</view>
      </template>
    </u-modal>
  </view>
</template>
<script>
export default {
  name: "selectArea",
  props: {
    object: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeIndex: 0,
      colorList: [],
      popupShow: false,
      modelShow: false,
      imgUrl: "",
    };
  },
  watch: {
    object: {
      handler(newVal, oldVal) {
        if (newVal.obj && newVal.obj.detail) {
          if (newVal.obj.detail.length && newVal.obj.detail.length > 10) {
            this.colorList = newVal.obj.detail.slice(0, 10);
          } else {
            this.colorList = newVal.obj.detail;
          }
          this.imgUrl = newVal.obj.detail[0].pic;
        }
        if (
          newVal.type === "sportHang" ||
          newVal.type === "glassesBag" ||
          newVal.type === "glassesCase"
        ) {
          this.activeIndex = "";
        }
      },
      immediate: true,
    },
  },
  mounted() {
    const popup = document.querySelectorAll(".popup-show");
    popup.forEach((item) => {
      item.addEventListener(
        "touchmove",
        (e) => {
          e.preventDefault();
          e.stopPropagation();
        },
        { passive: false }
      );
    });
  },
  methods: {
    gridClick(index) {
      if (index === 9) {
        this.popupShow = true;
      } else {
        if (this.activeIndex === index) {
          this.activeIndex = "";
          this.$emit("selectColor", {
             color: '',
            id: this.object.type,
          });
        } else {
          this.activeIndex = index;
          this.imgUrl = this.object.obj.detail[index].pic;
          this.$emit("selectColor", {
            color: this.object.obj.detail[this.activeIndex],
            id: this.object.type,
          });
        }
      }
    },
    close() {
      this.popupShow = false;
    },
    popupClick(index) {
      this.activeIndex = index;
    },
    sureEvent() {
      this.imgUrl = this.object.obj.detail[index].pic;
      this.$emit("selectColor", {
        color: this.object.obj.detail[this.activeIndex],
        id: this.object.type,
      });
      this.popupShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.select-area {
  padding: 20rpx;
  .select-title {
    color: #222;
    font-size: 30rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40rpx 0;
    .tag-box {
      margin-left: 20rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
  .tag-content {
    min-width: 300rpx;
  }
  .select-content {
    display: flex;
    align-items: center;
    .img-box {
      width: 180rpx;
      height: 180rpx;
      border: 1px solid #ccc;
      border-radius: 20rpx;
      margin-right: 20rpx;
      overflow: hidden;
    }
  }
}
.grid-box {
  flex: 1;
  .grid-item {
    width: 75rpx;
    height: 75rpx;
    position: relative;
    border-radius: 10rpx;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    .check-box {
      position: absolute;
      top: 0;
      right: 0;
      width: 32rpx;
      height: 32rpx;
      background-color: #000;
      color: #fff;
      text-align: center;
      clip-path: polygon(0 0, 100% 0, 100% 100%);
    }
    .check-icon {
      position: absolute;
      top: 0;
      right: 0;
    }
    .more-color {
      font-size: 24rpx;
      color: #999;
      width: 80%;
      text-align: center;
    }
  }
  .gridActive {
    border: 2px solid #000;
  }
}
.popup-content {
  padding: 30rpx;
  .title-box {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 50rpx;
    width: 100%;
    text-align: center;
    position: relative;
    .close1-btn {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .btn-box {
    margin: 0 auto;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
    width: 430rpx;
    line-height: 70rpx;
    height: 70rpx;
    background: #000000;
    border-radius: 44rpx;
  }
}
.close-btn {
  margin: 0 auto;
  color: #fff;
  text-align: center;
  padding: 15rpx 0;
  width: 160rpx;
  background: #000000;
  border-radius: 44rpx;
}
::v-deep .u-modal__title {
  font-size: 34rpx !important;
  font-weight: normal !important;
  color: #1c1c1c !important;
}
.model-content {
  margin-top: 20rpx;
}
</style>
